<template>

<div style="background-color: white;border: none;display: flex;justify-content: center; align-items: center; ">
  <label  class="enter-y" style="color: #0a8fe9 ; margin-top: 15px">线路： </label>

  <JDictSelectTag style=" margin-top: 15px"  @change="changeLine" :dictCode=lineDictCode :showChooseOption="false"  placeholder="请选择线路"/>
  &nbsp
  <label class="enter-y" style="color: #0a8fe9; margin-top: 15px">  传感器 ：</label>
  <a-select  style=" margin-top: 15px"
    :placeholder="placeholder"
    v-bind="attrs"
    v-model:value ="deFaultValue"
    @change="changeDevice">
    <!--    :filterOption="handleFilterOption"
        :getPopupContainer="getPopupContainer"
        @change="changeDevice"-->

    <a-select-option v-if="showChooseOption" :value="null">请选择…</a-select-option>
    <template v-for="item in dictOptions" :key="`${item.value}`">
      <a-select-option :value="item.value">
          <span
            :class="[useDicColor && item.color ? 'colorText' : '']"
            :style="{ backgroundColor: `${item.color}` }"
            :title="item.label"
          >
            {{ item.label }}
          </span>
      </a-select-option>
    </template>
  </a-select>
</div>
<!--    <div class="md:flex enter-y">
      <VisitRadar class="md:w-1/3 w-full" :loading="loading" />
      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
      <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
    </div>-->

  <MonitorGrowCard :temperature=temperature :pd=pd :voltage=voltage :loading=false  />
  <MonitorSiteAnalysis :deviceNO=deviceNO />
</template>
<script lang="ts" setup >
import {defineComponent, ref} from 'vue';
import MonitorSiteAnalysis from '../components/MonitorSiteAnalysis.vue';
import EchartsGauge from '../components/EchartsGauge.vue';
import MonitorGrowCard from '../components/MonitorGrowCard.vue';
import GrowCard from '../components/GrowCard.vue';
import SiteAnalysis from '../components/SiteAnalysis.vue';
import VisitSource from '../components/VisitSource.vue';
import VisitRadar from '../components/VisitRadar.vue';
import SalesProductPie from '../components/SalesProductPie.vue';
import JDictSelectTag from "@/views/yc/components/JDictSelectTag.vue";
import {propTypes} from "@/utils/propTypes";
import {useUserStore} from "@/store/modules/user";
import {defHttp} from "@/utils/http/axios";
import {useAttrs} from "@/hooks/core/useAttrs";
import {initDictOptions} from "@/utils/dict";
import {omit} from "lodash-es";
    const dictOptions = ref<any[]>([]);
    const attrs = useAttrs();
    const deFaultValue = ref("");
    const textValue = "设备：   ";
    const lineDictCode = ref("yc_line,name,id,sys_org_code like '"+ useUserStore().getUserInfo.orgCode+"%'");
    const temperature = ref("0");//温度
    const pd =  ref("0");//局放
    const voltage =  ref("0");//电压
    const deviceNO = ref(null);
    const queryDeviceByIdUrl = '/yc/web/ycPdDevice/queryById';
    const changeLine = async (event) => {
      if(event){
        await initDictData("yc_pd_device,name,id, line_id = '" + event + "' and sys_org_code like '" + useUserStore().getUserInfo.orgCode + "%'").finally(()=>{
          deFaultValue.value = dictOptions.value[0].value;
          changeDevice(dictOptions.value[0].value);
        })
      }

    }
  async function initDictData(terminalDictCode) {
  //根据字典Code, 初始化字典数组
  const dictData = await initDictOptions(terminalDictCode);
  dictOptions.value = dictData.reduce((prev, next) => {
    if (next) {
      const value = next['value'];
      prev.push({
        label: next['text'] || next['label'],
        value: value,
        color: next['color'],
        ...omit(next, ['text', 'value', 'color']),
      });
    }
    return prev;
  }, []);
}
  const changeDevice = async (event) => {
    //获取数据
    let params = {id: event};
    const data = await defHttp.get({url: queryDeviceByIdUrl, params});
    temperature.value = data.temperature;
   pd.value = data.pdStrength;
    voltage.value = data.voltage;
    //props.deviceId = event
   deviceNO.value = data.no;
}
</script>
